<script lang="ts" setup>
import {onBeforeUnmount, onMounted, reactive, ref, toRefs} from "vue";
import {useRoute, useRouter} from "vue-router";
import {getBookContent, getNextChapterId, getPreChapterId} from "@/api/book";
import {ElMessage} from "element-plus";
import type {Book, BookContent, ChapterInfo} from "@/type/book";
import select from "@/assets/images/select.png"

const container = ref()
const toolColorRef = ref()
const textColorRef = ref()
const preBtnColorRef = ref()
const directBtnColorRef = ref()
const nextBtnColorRef = ref()
const contentFaceRef = ref()
const handleScroll = () => {
  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  console.log(scrollTop)
  if (scrollTop >= 150) {
    state.fixed = true;
  } else {
    state.fixed = false;
  }
}
const keyDown = (e: any) => {
  const bookId = state.data.chapterInfo.bookId;
  //左
  if (e.keyCode == 37) {
    // 按下左箭头
    preChapter(bookId);
  } else if (e.keyCode == 39) {
    // 按下右箭头
    nextChapter(bookId);
  }

}
onMounted(() => {
  window.addEventListener('scroll', handleScroll)
  //监听键盘
  window.addEventListener('keydown', keyDown)
  init(route.params.chapterId);
  console.log("route.params.chapterId:",);
  changeTheme('color1')
  changeFace('face1')
})

interface Data {
  chapterInfo: ChapterInfo;
  bookInfo: Book;
  bookContent: string;

}

const route = useRoute();
const router = useRouter();
const state = reactive({
  selectFace: "face1",
  selectColor: "color1",
  fontSize: 16,
  setFlag: false,
  fixed: false,
  data: {} as Data,
  imgBaseUrl: import.meta.env.VITE_APP_BASE_IMG_URL,
});
//解构
const {fixed, data, imgBaseUrl, setFlag, selectColor, selectFace, fontSize} = toRefs(state)
onBeforeUnmount(async () => {
  console.log("onBeforeUnmount............");
  window.removeEventListener('scroll', handleScroll)
  window.removeEventListener('keydown', keyDown, false)

});

const bookDetail = (bookId: any) => {
  router.push({path: `/book/${bookId}`});
};

const chapterList = (bookId: any) => {
  router.push({path: `/chapter_list/${bookId}`});
};

const preChapter = async (bookId: any) => {
  const {data} = await getPreChapterId(route.params.chapterId);
  if (data) {
    router.push({path: `/book/${bookId}/${data}`});
    init(data);
  } else {
    ElMessage.warning("已经是第一章了！");
  }
  scrollToElement(container);
};

const nextChapter = async (bookId: any) => {
  const {data} = await getNextChapterId(route.params.chapterId);
  if (data) {
    router.push({path: `/book/${bookId}/${data}`});
    init(data);
  } else {
    ElMessage.warning("已经是最后一章了！");
  }
  scrollToElement(container);
};

const init = async (chapterId: any) => {
  const {data} = await getBookContent(chapterId);
  state.data = data;
};


function scrollToElement(element: any) {
  if (element) {
    // 使用vue-use库进行平滑滚动
    scrollTo(0, element.offsetTop);
  }
}

const doSetUp = () => {
  state.setFlag = !state.setFlag;
}
const changeTheme = (value: string) => {
  state.selectColor = value;
  if (value == 'color1') {
    toolColorRef.value.style.backgroundColor = '#FAF4E7'; // 设置为红色
    textColorRef.value.style.backgroundColor = '#FAF4E7'; // 设置为红色
    preBtnColorRef.value.style.backgroundColor = '#FAF4E7'; // 设置为红色
    nextBtnColorRef.value.style.backgroundColor = '#FAF4E7';
    directBtnColorRef.value.style.backgroundColor = '#FAF4E7';
  } else if (value == 'color2') {
    toolColorRef.value.style.backgroundColor = '#F6ECD3'; // 设置为红色
    textColorRef.value.style.backgroundColor = '#F6ECD3'; // 设置为红色
    preBtnColorRef.value.style.backgroundColor = '#F6ECD3'; // 设置为红色
    nextBtnColorRef.value.style.backgroundColor = '#F6ECD3';
    directBtnColorRef.value.style.backgroundColor = '#F6ECD3';
  } else if (value == 'color3') {
    toolColorRef.value.style.backgroundColor = '#EAF2E8'; // 设置为红色
    textColorRef.value.style.backgroundColor = '#EAF2E8'; // 设置为红色
    preBtnColorRef.value.style.backgroundColor = '#EAF2E8'; // 设置为红色
    nextBtnColorRef.value.style.backgroundColor = '#EAF2E8';
    directBtnColorRef.value.style.backgroundColor = '#EAF2E8';
  } else if (value == 'color4') {
    toolColorRef.value.style.backgroundColor = '#EAF4F5'; // 设置为红色
    textColorRef.value.style.backgroundColor = '#EAF4F5'; // 设置为红色
    preBtnColorRef.value.style.backgroundColor = '#EAF4F5'; // 设置为红色
    nextBtnColorRef.value.style.backgroundColor = '#EAF4F5';
    directBtnColorRef.value.style.backgroundColor = '#EAF4F5';
  } else if (value == 'color5') {
    toolColorRef.value.style.backgroundColor = '#F5E7E7'; // 设置为红色
    textColorRef.value.style.backgroundColor = '#F5E7E7'; // 设置为红色
    preBtnColorRef.value.style.backgroundColor = '#F5E7E7'; // 设置为红色
    nextBtnColorRef.value.style.backgroundColor = '#F5E7E7';
    directBtnColorRef.value.style.backgroundColor = '#F5E7E7';
  } else if (value == 'color6') {
    toolColorRef.value.style.backgroundColor = '#E4E4E3'; // 设置为红色
    textColorRef.value.style.backgroundColor = '#E4E4E3'; // 设置为红色
    preBtnColorRef.value.style.backgroundColor = '#E4E4E3'; // 设置为红色
    nextBtnColorRef.value.style.backgroundColor = '#E4E4E3';
    directBtnColorRef.value.style.backgroundColor = '#E4E4E3';
  } else if (value == 'color7') {
    toolColorRef.value.style.backgroundColor = '#494A49'; // 设置为红色
    textColorRef.value.style.backgroundColor = '#494A49'; // 设置为红色
    preBtnColorRef.value.style.backgroundColor = '#494A49'; // 设置为红色
    nextBtnColorRef.value.style.backgroundColor = '#494A49';
    directBtnColorRef.value.style.backgroundColor = '#494A49';
  }
}
const changeFace = (value: string) => {
  state.selectFace = value;
  if (value == 'face1') {
    textColorRef.value.style.fontFamily = '宋体';
    contentFaceRef.value.style.fontFamily = '宋体';
  } else if (value == 'face2') {
    textColorRef.value.style.fontFamily = '仿宋';
    contentFaceRef.value.style.fontFamily = '仿宋';
  } else if (value == 'face3') {
    textColorRef.value.style.fontFamily = '黑体';
    contentFaceRef.value.style.fontFamily = '黑体';
  } else if (value == 'face4') {
    textColorRef.value.style.fontFamily = '微软雅黑';
    contentFaceRef.value.style.fontFamily = '微软雅黑';
  } else if (value == 'face5') {
    textColorRef.value.style.fontFamily = '华文细黑';
    contentFaceRef.value.style.fontFamily = '华文细黑';
  }
}
const changeFontSize = (value: string) => {
  if (value == 'A-' && state.fontSize > 10) {
    state.fontSize--
    contentFaceRef.value.style.fontSize = Number(state.fontSize - 1) + 'px'
  } else if (value == 'A+' && state.fontSize < 30) {
    state.fontSize++
    contentFaceRef.value.style.fontSize = Number(state.fontSize + 1) + 'px'
  }
}
</script>
<template>
  <div class="main">
    <div ref="container" class="container">
      <div class="tools">
        <ul ref="toolColorRef" :class="{fixed:state.fixed}">
          <li @click="chapterList(data.chapterInfo.bookId)"><i class="iconfont icon-mulu"></i><span>目录</span></li>
          <li @click="doSetUp"><i class="iconfont icon-shezhi"></i><span>设置</span></li>
          <li><i class="iconfont icon-shujia"></i><span>书架</span></li>
          <li @click="bookDetail(data.chapterInfo.bookId)"><i class="iconfont icon-shuye"></i><span>书页</span></li>
        </ul>
        <div v-show="setFlag" :class="{fixed2:state.fixed,set:!state.fixed,setup:true}">
          <h1 class="title">设置</h1>
          <div class="setup-content">
            <div class="theme">
              <div>阅读主题</div>
              <div :class="{active:selectColor=='color1'}" class="color1 color" @click="changeTheme('color1')"></div>
              <div :class="{active:selectColor=='color2'}" class="color2 color" @click="changeTheme('color2')"></div>
              <div :class="{active:selectColor=='color3'}" class="color3 color" @click="changeTheme('color3')"></div>
              <div :class="{active:selectColor=='color4'}" class="color4 color" @click="changeTheme('color4')"></div>
              <div :class="{active:selectColor=='color5'}" class="color5 color" @click="changeTheme('color5')"></div>
              <div :class="{active:selectColor=='color6'}" class="color6 color" @click="changeTheme('color6')"></div>
              <div :class="{active:selectColor=='color7'}" class="color7 color" @click="changeTheme('color7')"></div>
            </div>
            <div class="typeface">
              <div>正文字体</div>
              <div :class="{'face-active':selectFace=='face1'}" class="face face1" @click="changeFace('face1')">宋体
              </div>
              <div :class="{'face-active':selectFace=='face2'}" class="face face2" @click="changeFace('face2')">仿宋
              </div>
              <div :class="{'face-active':selectFace=='face3'}" class="face face3" @click="changeFace('face3')">黑体
              </div>
              <div :class="{'face-active':selectFace=='face4'}" class="face face4" @click="changeFace('face4')">
                微软雅黑
              </div>
              <div :class="{'face-active':selectFace=='face5'}" class="face face5" @click="changeFace('face5')">
                华文细黑
              </div>
            </div>
            <div class="size">
              <div class="size-text">字体大小</div>
              <div class="size-btn">
                <div class="btn" @click="changeFontSize('A-')">A-</div>
                <div class="btn">{{ fontSize }}</div>
                <div class="btn" @click="changeFontSize('A+')">A+</div>
              </div>
            </div>
          </div>

        </div>
      </div>
      <div ref="content" class="content">
        <div ref="textColorRef" class="content-text">
          <div class="book-name">
            <span v-if="data.chapterInfo" class="name">{{ data.chapterInfo.chapterName }}</span>
          </div>
          <div v-if="data.chapterInfo" class="book-info">
            <div>类别：<span>{{ data.bookInfo.categoryName }}</span></div>
            <div v-if="data.bookInfo">作者：<span>{{ data.bookInfo.authorName }}</span></div>
            <div v-if="data.bookInfo">字数：<span>{{ data.chapterInfo.chapterWordCount }}</span></div>
            <div v-if="data.bookInfo">更新时间：<span>{{ data.chapterInfo.chapterUpdateTime }}</span></div>
          </div>
          <div class="book-content">
            <span ref="contentFaceRef" v-html="data.bookContent"></span>
          </div>
        </div>
        <div class="content-btn">
          <div ref="preBtnColorRef" class="pre" @click="preChapter(data.chapterInfo.bookId)">上一章</div>
          <div ref="directBtnColorRef" class="direct" @click="chapterList(data.chapterInfo.bookId)">目录</div>
          <div ref="nextBtnColorRef" class="next" @click="nextChapter(data.chapterInfo.bookId)">下一章</div>
        </div>
      </div>
    </div>

  </div>
</template>


<style scoped>
.main {
  background-color: #F5F5F5;
  user-select: none;

  .container {
    width: 60%;
    margin: 0 auto;
    display: flex;
    gap: 10px;
    position: relative;

    .tools {
      .fixed {
        position: fixed;
        top: 0;
      }

      .fixed2 {
        position: fixed;
        top: 0px;
        left: 450px;

      }

      .set {
        position: relative;
        left: 70px;
        top: 0px;
      }

      .setup {
        background-color: #F6F1E7;
        width: 600px;
        height: 230px;
        padding: 10px;
        display: flex;
        flex-direction: column;

        .title {
          font-size: 20px;
          font-weight: 600;
          padding-bottom: 30px;
        }

        .setup-content {
          display: flex;
          flex-direction: column;
          gap: 30px;

          .theme {
            display: flex;
            gap: 20px;
            align-items: center;

            .color {
              border-radius: 50%;
              width: 40px;
              height: 40px;

              &:hover {
                cursor: pointer;
                border: red solid 1px;
                box-sizing: border-box;
              }
            }

            .color1 {
              background-color: #FAF4E7;

            }

            .color2 {
              background-color: #F6ECD3;
            }

            .color3 {
              background-color: #EAF2E8;
            }

            .color4 {
              background-color: #EAF4F5;
            }

            .color5 {
              background-color: #F5E7E7;
            }

            .color6 {
              background-color: #E4E4E3;
            }

            .color7 {
              background-color: #494A49;
              background-image: url("../assets/images/moon.png");
              background-repeat: no-repeat;
              background-position: center;
              background-size: cover; /* 或者其他你需要的尺寸控制 */
            }

            .active {
              background-image: url("../assets/images/select.png") !important;
              background-repeat: no-repeat !important;
              background-position: center !important;
              background-size: cover !important; /* 或者其他你需要的尺寸控制 */
              object-fit: cover !important;
            }
          }

          .typeface {
            align-items: center;
            display: flex;
            gap: 20px;

            .face {
              border: 1px solid #000;
              padding: 5px;
              width: 70px;
              text-align: center;

              &:hover {
                cursor: pointer;
                color: #fc7403;
                border: #fc7403 solid 1px;
                //box-sizing: border-box;
              }
            }

            .face1 {
              font-family: "宋体";
            }

            .face2 {
              font-family: "仿宋";
            }

            .face3 {
              font-family: "黑体";
            }

            .face4 {
              font-family: "微软雅黑";
            }

            .face5 {
              font-family: "华文细黑";
            }

            .face-active {
              color: red;
              border: 1px solid red;
            }
          }

          .size {
            align-items: center;
            display: flex;
            gap: 20px;

            .size-btn {
              display: flex;

              .btn {
                border: 1px solid #000;
                width: 70px;
                text-align: center;
                padding: 5px;

                &:hover {
                  cursor: pointer;
                  color: #fc7403;
                }
              }
            }
          }
        }
      }

      width: 60px;

      ul {
        background-color: #F6F1E7;
        display: block;
        position: absolute;
        top: 0;

        li {
          display: flex;
          flex-direction: column;
          justify-content: center;

          i {
            display: block;

            &:hover {
              cursor: pointer;
              color: #fc7403;
            }
          }

          span {
            display: block;

            &:hover {
              cursor: pointer;
              color: #fc7403;
            }

          }

          border: 1px solid #DDD8CF;
          width: 60px;
          height: 60px;
          list-style-type: none;
          text-align: center;

        }
      }
    }

    .content {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 10px;

      .content-text {
        display: flex;
        flex-direction: column;
        gap: 20px;
        border: 1px solid #EDEDED;
        background-color: #F6F1E7;

        .book-name {
          display: flex;
          justify-content: center;
          font-size: 30px;
          padding: 20px;
        }

        .book-info {
          display: flex;
          gap: 20px;
          justify-content: center;
          color: #7F7F7F;
        }

        .book-content {
          padding: 20px;
          font-size: 16px;
          font-family: microsoft yahei;
          white-space: break-spaces;
          line-height: 20px;
        }
      }

      .content-btn {
        display: flex;
        gap: 10px;
        justify-content: space-between;

        div {
          flex: 1;
          width: 100px;
          height: 40px;
          background-color: #F6F1E7;
          text-align: center;
          line-height: 40px;

          &:hover {
            cursor: pointer;
            //background-color: #fc7403;
            color: #fc7403;
          }
        }
      }
    }
  }
}
</style>
